<template>
	<view class="house_main">
		<view class="nothing" v-if="!loading && houseList.length === 0">
			空空如也
		</view>
		<u-loading-page loading-text="加载中" :loading="loading && houseList.length === 0"></u-loading-page>
		<uni-popup ref="rightModel" type="right">
			<view class="house_main_model">
				<view class="house_main_model_sort_key">
					<uni-collapse>
						<uni-collapse-item title="排序" open>
							<uni-title type="h2" title="排序属性"></uni-title>
							<uni-segmented-control :current="sortKey.indexOf(requestInterface.sort.key)"
								:values='modelSortBase' @clickItem="onModelSortClick" styleType="button"
								activeColor="#0275d9"></uni-segmented-control>
							<uni-title type="h2" title="排序方式"></uni-title>
							<uni-data-checkbox v-model="requestInterface.sort.method" :localdata="range"
								@change="changeSortord">
							</uni-data-checkbox>
						</uni-collapse-item>
						<uni-collapse-item title="条件筛选" open>
							<uni-title type="h2" title="季节选择"></uni-title>
							<uni-segmented-control :current="requestInterface.filter.season-1"
								:values='filterSeasonBase' @clickItem="onSeasonFiterCheck" styleType="button"
								activeColor="#0275d9">
							</uni-segmented-control>
							<uni-title type="h2" title="库存区间"></uni-title>
							<view class="house_main_model_sort_key_num">
								<uni-easyinput type="number" v-model="filterNumBase.min" @input="onFilterNumInput"
									placeholder="区间最小" />
								<text>至</text>
								<uni-easyinput type="number" placeholder="区间最大" v-model="filterNumBase.max"
									@input="onFilterNumInput" />
								<button size="mini" style="margin-left: 20rpx;"
									:class="isFilterNumCheck ? 'finish' : 'check'">{{isFilterNumCheck ? "校验通过" : "校验失败"}}</button>
							</view>
						</uni-collapse-item>
					</uni-collapse>
					<view class="house_main_model_sort_key_save">
						<button type="primary" @click="saveOptions()">保存</button>
						<button type="default" @click="searchClear()">重置</button>
					</view>
				</view>
			</view>
		</uni-popup>
		<view class="house_main_search">
			<uni-search-bar @confirm="search" @input="input" placeholder="搜素物品" @clear="searchClear"></uni-search-bar>
		</view>
		<view class="house_main_options" @click="showOptionsModel">

		</view>
		<view class="house_main_list">
			<view v-for="item in houseList" class="house_main_list_item" :key="item.id">
				<HouseCar :value="item" @click="goHouseDetial(item.id)" @buttonClick="onCardButtonClick" />
			</view>
		</view>
		<view class="house_main_bottom">
			<text v-if="onBottom">
				已经到底了
			</text>
			<text v-else-if="loading && houseList.length > 0 ">
				加载中
			</text>
		</view>
	</view>
</template>

<script>
	import {
		getHouseList
	} from "@/request/index.js"
	const sortKey = ["time", "price", "num", "out_goods", "on_goods"]
	export default {
		data() {
			return {
				code: '',
				requestInterface: {
					page_size: 10,
					page_num: 1,
					sort: {
						key: "time",
						method: 1
					},
					filter: {
						season: 0,
						search: '',
						num: '',
						time: ""
					}
				},
				filterNumBase: {
					min: 0,
					max: 0
				},
				isFilterNumCheck: true,
				value: 0,
				range: [{
					"value": 0,
					"text": "正序"
				}, {
					"value": 1,
					"text": "倒序"
				}],
				houseList: [],
				total: 0,
				onBottom: false,
				loading: false,
				modelSortBase: ["时间", "价格", "库存", "出货量", "进货量"],
				filterSeasonBase: ["春", "夏", "秋", "冬", "全"],
				modelFrom: {
					method: 1,
					key: "time"
				},
				sortKey,
				searchTimer: 0,
				filterNumMaxTimer: 0,
				filterNumMinTimer: 0
			}
		},
		onShow() {
			const { $rIndex:rIndex } = uni
			if(rIndex){
				uni.$rIndex = false
				this.getReData()
			}
		},
		async onLoad() {
			uni.showLoading({
				title:"加载中",
			})
			await this.setHouseList()
			uni.hideLoading()
		},
		async onPullDownRefresh() {
			await this.getReData()
			uni.stopPullDownRefresh()
		},

		onReachBottom() {
			if (this.total === 0 || this.total - this.requestInterface.page_size * this.requestInterface.page_num > 0) {
				this.requestInterface.page_num++
				this.setHouseList()

			} else {
				this.onBottom = true
				uni.showToast({
					title:"已经到底了",
					icon:"none"
				})
			}
		},
		methods: {
			goRouter() {
				this.$Router.push("/pages/login/login")
			},
			onSeasonFiterCheck(item) {
				console.log(item)
			},
			saveOptions() {
				this.$refs.rightModel.close()
				this.reReq()
			},
			async getReData(){	
				this.houseList = this.$options.data().houseList
				this.requestInterface.page_num = 1
				await this.setHouseList()
			},
			searchClear() {
				Object.assign(this.$data, this.$options.data())
				this.requestInterface.page_num = 1
				this.setHouseList()
			},
			goHouseDetial(id){
				this.$Router.push(`/pages/initTheInventory/initTheInventory?id=${id}`)
			},
			onFilterNumInput() {
				this.$nextTick(() => {
					var {
						filterNumBase: {
							min,
							max
						}
					} = this
					if (max - min >= 0) {
						max = max || 0
						min = min || 0
						this.requestInterface.filter.num = `${min}-${max}`
						this.isFilterNumCheck = true
					} else {
						this.isFilterNumCheck = false
					}
				})
			},
			changeSortord({
				detail: {
					value
				}
			}) {
				this.requestInterface.sort.method = value
			},
			onCardClick(item) {
				console.log(item)
			},
			onCardButtonClick(item) {
				console.log(item)
			},
			input(value) {
				const {
					searchTimer
				} = this
				if (searchTimer) {
					clearTimeout(searchTimer)
					this.searchTimer = 0
				}
				this.searchTimer = setTimeout(() => {
					this.search({
						value
					})
				}, 600)
			},
			onModelSortClick(value) {
				this.requestInterface.sort.key = sortKey[value.currentIndex]
			},
			search(item) {
				const {
					value
				} = item
				this.requestInterface.filter.search = value
				this.requestInterface.page_num = 1
				this.reReq()
			},
			reReq() {
				this.houseList = this.$options.data().houseList
				this.setHouseList()
			},
			showOptionsModel() {
				this.$refs.rightModel.open()
			},
			async setHouseList(dataBase) {
				this.loading = true
				try {
					const res = await getHouseList(Object.assign(this.requestInterface, dataBase))
					const {
						page,
						total,
						list
					} = res
					this.total = total
					if (list != null) {
						this.houseList = [...this.houseList, ...list]
					}
				} catch (e) {
					uni.showToast({
						"title": e.message,
						"icon": "error"
					})
				}
				this.loading = false
			}
		}
	}
</script>

<style lang="scss">
	.nothing{
		position: absolute;
		top: 50%;
		transform: translate(-50%,-50%);
		left: 50%;
		color: rgb(185, 179, 179);
	}
	.house_main {
		&_search {
			width: 100vw;
			height: 100rpx;
		}

		&_bottom {
			text-align: center;
			font-size: 30rpx;
			margin: 20rpx 0;
		}

		&_options {
			width: 100rpx;
			height: 100rpx;
			background-color: white;
			border-radius: 50%;
			position: fixed;
			bottom: 140rpx;
			right: 90rpx;
			background-image: url("@/static/options.png");
			background-size: 80%;
			box-sizing: border-box;
			border: 4rpx solid rgb(0, 122, 255);
			background-position: center;
			background-repeat: no-repeat;
			z-index: 98;
		}

		&_model {
			width: 70vw;
			height: 100vh;
			background-color: white;
			overflow: hidden;

			&_sort_key {
				width: 95%;
				margin: 30rpx auto 0;
				line-height: 30rpx;

				&_save {
					&>button {
						margin-top: 20rpx;
					}
				}

				&_num {
					display: flex;

					.check {
						background-color: red;
						font-weight: 700;
						color: white;
					}

					.finish {
						background-color: rgb(21, 236, 21);
						color: black;
						font-weight: 700;
					}

					uni-button {
						line-height: 70rpx;
					}

					&>text {
						margin: 0 20rpx;
						line-height: 70rpx;
					}
				}
			}
		}

		&_list {
			display: flex;
			flex-wrap: wrap;

			&_item {
				width: 47.5%;
				overflow: hidden;

				margin-left: 10rpx;


				&>img {
					width: 100%;
					height: 340rpx;
				}

				&_text {
					height: 500 - 340rpx;
					width: 100%;
					padding: 0 10rpx;

					&_title {
						font-size: 32rpx;
						width: 100%;
						line-height: 50rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						display: block;
					}

					&_note {
						font-size: 26rpx;
						color: #747474;
					}
				}

				margin-top: 20rpx;
			}
		}
	}
</style>
